/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Table, Icon, Message, Grid, Dialog, Input, Checkbox, Select } from '@alifd/next';
import IceContainer from '@icedesign/container';
import axios from '../../../../instances/request';
import { withRouter } from 'react-router-dom';
const TableExport = require('tableexport');

const { Row, Col } = Grid;

@withRouter
export default class DutyShiftContentTable extends Component {
  static displayName = 'DutyShiftContentTable';

  static propTypes = {
    limit: PropTypes.number,
    type: PropTypes.string,
    title: PropTypes.string,
    oid: PropTypes.string,
    sType: PropTypes.string,
  };

  static defaultProps = {
    limit: 8,
  };

  constructor(props) {
    super(props);
    this.state = {
      tableData: {
        totalCount: 0,
        pageSize: this.props.limit,
        currentPage: 1,
        list: [],
        __loading: false,
      },
      tableWidth: 800,
      value: {},
    };
  }

  setExportButton() {
    let tableId = 'exportTable';
    TableExport(document.getElementById(tableId), {
      formats: ['xlsx'],
      trimWhitespace: false,
      exportButtons: true,
      filename: `${this.props.title}-${this.props.createdTime}`,
    });
  }

  async componentDidMount() {
    this.setState({
      tableWidth: document.body.clientWidth - 290 + 60,
    }, () => {
      this.setExportButton();
    });
  }

  /**
   * 导出
   */
  handleExport() {
    document.getElementsByClassName('button-default xlsx')[0].click();
  }

  render() {
    const tableData = this.state.tableData;

    return (
      <div className="operation-table">
        <IceContainer style={styles.cardContainer}>
          <Table
            id="exportTable"
            dataSource={tableData.list}
            className="basic-table"
            hasBorder={true}
            primaryKey="key"
            style={{ textAlign: 'center', visibility:'hidden', height: '1px', width: this.state.tableWidth }}
          >
            <Table.Column
              title='设备类别'
              width={100}
              align='center'
              key='key'
              dataIndex='scope'
              lock='left'
            />
            <Table.Column
              title='设备名'
              width={100}
              align='center'
              key='key'
              dataIndex='equipmentName'
              lock='left'
            />
          </Table>
          <Row>
            <Col>
              <div style={styles.back} onClick={this.props.history.goBack}>
                <Icon type="arrow-left" />返回列表
              </div>
            </Col>
            <Col>
              <div className="operation-table-title" style={styles.operationTableTitle}>
                { this.props.title }
              </div>
            </Col>
            <Col>
              <Button
                style={{
                  ...styles.addButton,
                }}
                className='exportButton'
                type='primary'
                size='small'
                onClick={this.handleExport.bind(this)}
              >
                导出到Excel
              </Button>
              <Button
                style={styles.addButton}
                type='secondary'
                size='small'
              >
                添加记录
              </Button>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <div style={{ width: this.state.tableWidth }}>
                <Table
                  isZebra={true}
                  fixedHeader={true}
                  maxBodyHeight={350}
                  // stickyHeader={true}
                  dataSource={tableData.list}
                  className="basic-table"
                  loading={tableData.__loading}
                  hasBorder={true}
                  primaryKey="key"
                  style={{ textAlign: 'center' }}
                >
                  <Table.Column
                    title='设备类别'
                    width={100}
                    align='center'
                    key='key'
                    dataIndex='scope'
                    lock='left'
                  />
                  <Table.Column
                    title='设备名'
                    width={100}
                    align='center'
                    key='key'
                    dataIndex='equipmentName'
                    lock='left'
                  />
                </Table>
              </div>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  back: {
    margin: '10px 0 30px 10px',
    fontSize: '18px',
    fontWeight: '500',
    color: '#5584FF',
    cursor: 'pointer',
  },
  cardContainer: {
    padding: '10px 10px 20px 10px',
  },
  titleCol: {
    display: 'flex',
    flexDirection: 'row',
  },
  operBtn: {
    display: 'inline-block',
    width: '24px',
    height: '24px',
    borderRadius: '999px',
    color: '#929292',
    background: '#f2f2f2',
    textAlign: 'center',
    cursor: 'pointer',
    lineHeight: '24px',
    marginRight: '6px',
  },
  paginationContainer: {
    textAlign: 'right',
    paddingTop: '26px',
  },
  operationTableTitle: {
    fontSize: '18px',
    fontWeight: 'bold',
    fontColor: 'black',
    height: '45px',
    lineHeight: '45px',
    textAlign: 'center',
  },
  addButton: {
    float: 'right',
    margin: '14px 15px 0 0',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 40px'
  },
  formLabel: {
    minWidth: '80px',
  },
  tableRow: {
    background: '#FFFFFF',
    color: '#333333',
    fontSize: '14px',
    border: '1px solid #DCDEE3',
    borderTop: 'none',
    padding: '10px 10px',
  },

};
